Day 2：Chrome Extension 的基本架構與檔案結構 - manifest.json 基本資訊(1)

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

👨‍💻 作者：輔大智慧資安 412580084

📅 Day 2：Chrome Extension 的基本架構與檔案結構

🏗️ 從概念到實作

昨天我們了解了什麼是 Chrome Extension，今天我們要深入了解一個擴充功能是如何組成的。就像蓋房子需要藍圖一樣，Chrome Extension 也有它的基本架構！

📁 Chrome Extension 的核心檔案

一個完整的 Chrome Extension 通常包含以下核心檔案：

我的擴充功能/
├── manifest.json     ← 📋 擴充功能的身分證
├── popup.html        ← 🎨 使用者介面
├── popup.js          ← ⚡ 介面邏輯
├── content.js        ← 🌐 與網頁互動
├── background.js     ← 🔧 背景服務
└── icons/            ← 🖼️ 圖示檔案
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

📋 manifest.json - 擴充功能的身分證

manifest.json 是最重要的檔案，它告訴 Chrome 這個擴充功能的所有資訊，所以每一個擴充功能都需要此檔案來做識別，以下為它的格式：

基本資訊

在 manifest.json 中，必須包含以下固定名稱的欄位，否則 Chrome 會無法正確識別擴充功能：

{
  "manifest_version": 3,
  "name": "輔大課表生成器",
  "version": "1.0",
  "description": "輔大課表生成器，一鍵產生當學期課表",
}

👉 其中：

• manifest_version：目前最新版固定使用 3。

• name：擴充功能名稱。

• version：版本號，可依規則遞增（如 1.0.1）。

• description：簡短描述，方便使用者了解用途。

🎯 明天（Day 3）我們將從理論走向實作：

• 🛠️ 動手建立第一個 manifest.json
• 📁 初步建立專案結構